<script setup>
import { ref } from "vue"
const text = ref("")
const bool = ref(true)
const hobbies = ref([])
const gender = ref("女")
const friends = ref("")

function submitHandler() {
    console.log(text);
    // 将text提交给服务器，在根据服务器返回的数据做后续的操作
}
</script>

<template>
    <h1>hello vue</h1>
    <form @submit.prevent="submitHandler">
        <!-- 
            这我们将表单项的value属性和变量text做了绑定
            当value发生变化时，text变量会随之发生变化（单项绑定）
            当value或text任意一个发生变化时，另一个也会发生变化（双向绑定）
           -->

           <!-- 
                v-model的修饰符
                    .lazy 使用change来处理数据
                    .term 去除前后空格
                    .number 将数据转换为数值

            -->
        <div>
            信息：<input type="text" v-model="text">
        </div>
        <div>
            是否: <input type="checkbox" v-model="bool">
        </div>
        <div>
            爱好: 
            <input v-model = "hobbies" type = "checkbox" value = "足球">足球
            <input v-model = "hobbies" type = "checkbox" value = "篮球">篮球
            <input v-model = "hobbies" type = "checkbox" value = "羽毛球">羽毛球
            <input v-model = "hobbies" type = "checkbox" value = "乒乓球">乒乓球
        </div>
        <div>
            性别: 
            <input type="radio" v-model="gender" value="男">男
            <input type="radio" v-model="gender" value="女">女
        </div>
        <div>
            朋友：
            <select v-model="friends" >
                <option disabled value="">请选择你的好朋友</option>
                <option value="孙悟空">孙悟空</option>
                <option value="猪八戒">猪八戒</option>
                <option value="沙和尚">沙和尚</option>
            </select>
        </div>
        <div>
            <button>提交</button>
        </div>

    </form>
</template>